<template>
  <div class="home-page">
    <!-- 头像 -->
    <el-upload
      class="avatar-uploader"
      action="http://127.0.0.1:4523/m1/5357632-5029353-default/image"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img :src="userimage" class="avatar" />
    </el-upload>
    <!-- 个人信息 -->
     <div class="personal-info">
      <h1>昵称: {{username}}</h1>
      <el-input v-model="name" style="width: 240px" placeholder="改变昵称" />
      <el-button type="success" @Click="updateusername">提交</el-button>
      <h1>密码: {{userpassword}}</h1>
      <el-input v-model="password" style="width: 240px" placeholder="更改密码" />
      <el-button type="success" @Click="updateuserpassword">提交</el-button>
      <br><br><br>
      <el-button type="danger" @Click="logout">退出登录</el-button>
      <el-button type="danger" @Click="deleteuser">注销用户</el-button>
     </div>
  </div>
</template>

<script>
import { mapMutations, mapState,mapActions } from 'vuex'
export default {
  data(){
    return{
      name: '',
      password: '',
      username:JSON.parse(localStorage.getItem('User')).username,
      userpassword:JSON.parse(localStorage.getItem('User')).userpassword,
      userimage:JSON.parse(localStorage.getItem('User')).userimage,
    }
  },
  computed: {
   ...mapState('User',['user']),
   },
  methods: {
    ...mapMutations('User', ['updateUserImage','updateUserPassword']),
    ...mapActions('User', ['updateUserInfo','deletethisuser']),
    // 上传头像成功后展示图像
    handleAvatarSuccess(res, file) {
      this.updateUserInfo({userimage:`src/assets/images/${file.name}`})
    },
    // 上传头像之前的验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    // 更新用户信息
    updateusername() {
      this.updateUserInfo({username:this.name})
    },
    // 更新用户密码
    updateuserpassword() {
      this.updateUserInfo({userpassword:this.password})
    },
    // 退出登录，删除本地存储的信息，并刷新页面
    logout() {
      localStorage.removeItem('User')
      location.reload()
    },
    // 注销用户，删除本地存储的信息，并调用删除用户接口，并刷新页面
    deleteuser() {
      this.$confirm('确认注销用户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deletethisuser()
      }).catch(() => {
        this.$message.info('已取消注销')
      })
    },

  }
}
</script>

<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right:100px;
}
.avatar-uploader .avatar {
  margin:10px 30px;
  width: 300px;
  height: 300px;
  display: block;
  object-fit: cover; /* 保持图片宽高比并裁剪以适应容器 */
  border-radius: 50%;
}
</style>